<template>
  <div class="language-switcher">
    <button
      :class="{ 'bg-primary text-white': $i18n.locale === 'en' }"
      @click="switchToEnglish"
      class="px-3 py-1 rounded mr-2"
    >
      English
    </button>
    <button
      :class="{ 'bg-primary text-white': $i18n.locale === 'zh' }"
      @click="switchToChinese"
      class="px-3 py-1 rounded"
    >
      中文
    </button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { onMounted } from 'vue'

const { locale } = useI18n()

console.log('初始化LanguageSwitcher组件')
console.log('初始语言:', locale.value)

onMounted(() => {
  console.log('组件已挂载')
  console.log('当前i18n locale:', locale.value)
})

const switchToEnglish = () => {
  console.log('切换到英文')
  locale.value = 'en'
  localStorage.setItem('language', 'en')
  console.log('切换后语言:', locale.value)
}

const switchToChinese = () => {
  console.log('切换到中文')
  locale.value = 'zh'
  localStorage.setItem('language', 'zh')
  console.log('切换后语言:', locale.value)
}
</script>

<style scoped>
.language-switcher {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

button {
  border: 1px solid theme('colors.primary');
  background-color: transparent;
  color: theme('colors.primary');
  transition: all 0.3s;
}

button:hover {
  background-color: theme('colors.primary');
  color: white;
}
</style>
